<template>
	<view class="page_body grey_bg">
		
		 <!-- 导航栏 -->
		 <u-navbar title="话题资料" :autoBack="true" ></u-navbar>
		 
		  <view style="height: 44px;"></view>
		 
		 
		 <scroll-view scroll-y="true" :style="{height:wHeight-44 + 'px'}" :scroll-top="scrollTop"
						@scroll="listScroll" @scrolltolower="listScrolltoLower">
			
			<!-- 话题详情 -->
			<view class="info_box" >
				<view class="topic_head">
					<image class="topic_cover" :src="topicData.cover"></image>
					<view class="topic_info">
						<text class="topic_name">{{topicData.name}}</text>
						<text class="topic_des">{{topicData.memberCount}} {{topicData.memberNickname}}</text>
					</view>
				</view>
				<text class="topic_detail">{{topicData.description}}</text>
			</view>
			
			
			<!-- 题主 -->
			<view class="info_box">
				<view class="box_head">
					<view class="box_title_row">
						<text class="box_title">题主</text>
					</view>
				</view>
				
				<view class="box_item" v-if="memberData.master.poster">
					<image class="user_cover" :src="memberData.master.poster.avatar"></image>
					<view class="user_info">
						<text class="user_nick">{{memberData.master.poster.displayName}}</text>
					</view>
					<view class="user_right">
						<image class="user_opt" src="/static/icon/icon_more_opt.png" @click.stop="openActionSheet"></image>
					</view>
				</view>
			</view>
			
			
			<!-- 管理者 -->
			<view class="info_box">
				<view class="box_head">
					<view class="box_title_row">
						<text class="box_title">管理者</text>
					</view>
				</view>
				
				<view v-if="memberData.admin.length > 0">
				<view class="box_item" v-for="(aitem,aindex) in memberData.admin" :key="aindex">
					<image class="user_cover" :src="aitem.poster.avatar"></image>
					<view class="user_info">
						<text class="user_nick">{{aitem.poster.displayName}}</text>
					</view>
					<view class="user_right" v-if="memberType == 0">
						<image class="user_opt" src="/static/icon/icon_more_opt.png" @click.stop="openActionSheet"></image>
					</view>
				</view>
				</view>
			</view>
			
			
			<!-- 成员 -->
			<view class="info_box">
				<view class="box_head">
					<view class="box_title_row">
						<text class="box_title">成员</text>
					</view>
				</view>
				
				<view v-if="memberData.member.length > 0">
					<view class="box_item" v-for="(mitem,mindex) in memberData.member" :key="mindex">
						<image class="user_cover" :src="mitem.poster.avatar"></image>
						<view class="user_info">
							<text class="user_nick">{{mitem.poster.displayName}}</text>
						</view>
						<view class="user_right">
							<image class="user_opt" src="/static/icon/icon_more_opt.png" @click.stop="openActionSheet"></image>
						</view>
					</view>
				</view>				
			</view>
			
			
			
		</scroll-view>
		
		
		<u-toast ref="uToast"></u-toast>	
		

		 
		

		
		<!-- 弹框 -->
		<!-- <uni-popup ref="popupActionItem" type="share">
			<uni-popup-action-sheet :items="actionSheetList"></uni-popup-action-sheet>
		</uni-popup> -->
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				// 窗口高度
				wHeight: null,
				// 列表滑动高度
				scrollTop: 0,
				oldScrollTop: 0,
				// 查询
				queryForm:{
					topicId: '',
					page: 1,
					size: 20
				},
				memberType: 99,
				// 话题数据
				topicData: {},
				// 成员数据
				memberData: {
					master: {},
					admin: [],
					member: []
				},
				
				
			}
		},
		created() {
			const res = uni.getSystemInfoSync();
			this.wHeight = res.windowHeight
		},
		onLoad: function (option) { 
			this.queryForm.topicId = option.id
			this.getTopicInfo();
			this.getMemberList()
			this.getMemberType()
		},
		methods: {
			// 话题详情
			getTopicInfo(){
				this.$httpApi.baseArticleGet('open/topic/info/' + this.queryForm.topicId).then(({data}) => {
					if (data.code == "000000") {
						this.topicData = data.data
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(err => {})
			},
			// 获取当前用户在该话题的身份类型
			getMemberType(){
				if(!this.$authUtil.isLoginedin()){
					return
				}
				this.$httpApi.baseArticleGet('user/topic/memberType/' + this.queryForm.topicId).then(({data}) => {
					if (data.code == "000000") {
						this.memberType = data.data
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(err => {})
			},
			// 获取成员列表
			getMemberList(){				
				this.$httpApi.baseArticleGet('open/topic/memberList',this.queryForm).then(({data}) => {
					if (data.code == "000000") {
						if(data.data){
							data.data.records.forEach(item=>{
								if(item.memberType == 0){
									this.memberData.master = item
								}else if(item.memberType == 0){
									this.memberData.admin.push(item)
								}else{
									this.memberData.member.push(item)
								}
							})
						}
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(err => {})
			},
			// 列表滑动，记录scroll  位置
			listScroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			// 列表滑动触底
			listScrolltoLower() {
				// this.loadMoreData()
			},
			
			
			
			
			
			gotoBack(){
				uni.navigateBack({})
			},
			toogleRule() {
				// let count = this.ruleDownList.length;
				// if (count == 1) {
				// 	this.ruleDownList = this.ruleList;
				// 	this.ruleIcon = "/static/up.png";
				// } else {
				// 	this.ruleDownList = [this.ruleList[0]];
				// 	this.ruleIcon = "/static/down.png";
				// }
			},
			/**
			 * 打开操作
			 * @param {Object} e
			 */
			openActionSheet(e) {
				// this.actionSheetList = [];
				// this.actionSheetList.push('设置为管理员');
				// this.actionSheetList.push('删除成员');
				// this.$refs.popupActionItem.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info_box {
		display: flex;
		flex-direction: column;
		padding: 15px;
		background-color: #FFFFFF;
		margin-bottom: 5px;
	}
	.box_head {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.box_title_row {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
	}
	
	.box_title {
		font-size: 16px;
		font-weight: 500;
		margin: 5px 0;
	}
	
	.box_item{
		display: flex;
		flex-direction: row;
		padding: 8px 0;
	}
	
	
	// 话题资料
	.topic_head {
		display: flex;
		flex-direction: row;
	}
	.topic_cover {
		width: 55px;
		height: 55px;
		border-radius: 10px;
		margin-right: 10px;
	}
	.topic_info {
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	
	.topic_name {
		font-size: 17px;
		font-weight: 500;
		margin: 7px 0;
	}
	
	.topic_des {
		font-size: 12px;
		color: #999;
	}
	
	.topic_detail {
		margin-top: 10px;
		line-height: 20px;
		font-size: 13px;
		color: #666;
	}
	
	
	.user_cover {
		width: 35px;
		height: 35px;
		border-radius: 35px;
		margin-right: 10px;
		border-color: #F7F7F7;
		border-style: solid;
		border-width: 1px;
	}
	.user_info {
		height: 35px;
		line-height: 35px;
		display: flex;
		flex-direction: row;
		border-bottom-width: 1px;
		border-bottom-color: #fafafa;
		flex: 1;
		align-items: center;
	}
	.user_right {
		align-items: center;
	}
	
	.user_opt {
		margin-top: 9px;
		margin-right: 4px;
		width: 16px;
		height: 16px;
	}
	

</style>
